<template>
  <div class="follow">
    <div class="title">
      <svg
        @click="$router.back()"
        t="1671798247143"
        class="icon"
        viewBox="0 0 1024 1024"
        version="1.1"
        xmlns="http://www.w3.org/2000/svg"
        p-id="2281"
        width="200"
        height="200"
      >
        <path
          d="M319.64 512.016l336.016-336.008 45.248 45.248L364.896 557.28z"
          p-id="2282"
        ></path>
        <path
          d="M365.216 466.464l339.976 339.968-45.256 45.256-339.976-339.976z"
          p-id="2283"
        ></path>
      </svg>
      <span>关注店铺</span>
      <span></span>
    </div>
    <ul class="store" v-if="myStore">
      <li
        v-for="store in myStore"
        :key="store.storeId"
        @click="
          $router.push({ path: '/store', query: { storeid: store.storeId } })
        "
      >
        <div class="store-title">
          <img
            v-lazy="
              store.storeLogo ||
              'https://image-mall.gxptkc.com/images/admin/setting/jwckvntX6HjLQD7mRke.png'
            "
            alt=""
          />
          <div class="msg">
            <h3>{{ store.storeName }}</h3>
            <div class="self">
              <span>自营</span>
              <span>关注{{ store.followNumber }}</span>
            </div>
          </div>
        </div>
        <ul class="store-goods">
          <li v-for="item in store.goodsList.slice(0, 3)" :key="item.goodsId">
            <img v-lazy="item.mainImage" alt="" />
            <p>￥{{ item.goodsPrice.toFixed(2) }}</p>
          </li>
        </ul>
      </li>
    </ul>
    <p>数据加载完毕~</p>
  </div>
</template>

<script>
import Vue from "vue";
import { Lazyload } from "vant";

Vue.use(Lazyload);
export default {
  data() {
    return {
      myStore: null,
      token: null,
    };
  },
  async created() {
    this.token = localStorage.getItem("fastCar-token");
    let res = await this.axios({
      method: "GET",
      url: "https://m-mall.gxptkc.com/v3/member/front/followStore/list?pageSize=10&current=1",
      headers: {
        authorization: `Bearer ${this.token}`,
      },
    });
    this.myStore = res.data.data.storeList;
  },
};
</script>

<style lang="scss" scoped>
.follow {
  width: 100vw;
  height: 100vh;
  background-color: rgb(245, 245, 245);
  .title {
    display: flex;
    justify-content: space-between;
    padding: 10rem;
    background-color: #fff;
    margin-bottom: 10rem;
    svg {
      width: 25rem;
      height: 25rem;
    }
    span {
      font-size: 16rem;
      color: #000;
      font-weight: bold;
    }
  }
  ul.store {
    padding: 0 10rem;
    background-color: #fff;
    margin-bottom: 20rem;
    li {
      padding: 10rem 0;
      border-bottom: 1px solid #eee;
      &:last-child {
        border-bottom: none;
      }
      .store-title {
        display: flex;
        align-items: center;
        img {
          width: 40rem;
          height: 40rem;
          margin-right: 10rem;
        }
        .msg {
          p {
            font-size: 15rem;
            color: #2d2d2d;
            font-weight: bold;
          }
          .self {
            margin-top: 5rem;
            margin-bottom: 10rem;
            span {
              color: #999;
              &:first-child {
                background-color: #fc1c1c;
                border-radius: 10rem;
                color: #fff;
                padding: 2rem 4rem;
                margin-right: 3rem;
              }
            }
          }
        }
      }
    }
    ul.store-goods {
      display: flex;
      justify-content: space-between;
      align-items: center;
      li {
        border-radius: 10rem;
        overflow: hidden;
        position: relative;
        margin-bottom: 10rem;
        img {
          width: 108rem;
          height: 108rem;
        }
        p {
          position: absolute;
          bottom: 0;
          left: 0;
          width: 100%;
          display: flex;
          align-items: center;
          justify-content: center;
          color: #fff;
          background-color: rgba(0, 0, 0, 0.3);
          padding: 2rem 0;
        }
      }
    }
  }
  > P {
    display: flex;
    justify-content: center;
    margin-top: 15rem;
    color: #bbb;
  }
}
</style>